<template>
  <div class="create-layout">
    <!-- 主体 -->
    <div id="main-create" class="main">
      <!-- <cell-header :title="'个人中心'" :type="1" style="padding-bottom: 24px" /> -->
      <!-- 个人中心 -->
      <!-- 绑定手机表单 -->
      <el-dialog title="绑定手机" :visible.sync="bindTelVisible" :append-to-body="true" width="547px">
        <el-form :model="telForm" :rules="rulesTel" ref="telBindForm" label-width="80px" label-position="top">
          <el-form-item label="手机" class="code" prop="newAccount">
            <el-input v-model="telForm.newAccount" size="small" placeholder="11位手机号" style="margin-top:8px;">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" class="code" prop="newCode">
            <el-input v-model="telForm.newCode" placeholder="输入验证码" size="small" style="width: 42%;"></el-input>
            <el-button size="small" type="success"  :disabled="disabledNewShow" @click="getNewCode">{{codeTextNew}}</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" class="cancel-btn" @click="bindTelVisible = false">取 消</el-button>
          <el-button size="small" type="success" @click="bindToTel('telBindForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 更新手机表单 -->
      <el-dialog title="更改手机" :visible.sync="EditTelVisible" :append-to-body="true" width="547px">
        <el-form :model="telForm" :rules="rulesTel" ref="telForm" label-width="80px" label-position="top" class="form">
          <el-form-item label="现有手机" class="code">
            <el-input v-model="info.mobile" size="small" disabled placeholder="输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="oldCode" class="code">
            <el-input v-model="telForm.oldCode" size="small" placeholder="输入验证码" style="width: 40%;"></el-input>
            <el-button size="small" type="success" :disabled="disabledShow"  @click="getOldCode">{{codeText}}</el-button>
          </el-form-item>
          <el-form-item label="新手机" prop="newAccount" class="code">
            <el-input v-model="telForm.newAccount" size="small" placeholder="输入新手机号" style="margin-top:5px">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
          <el-form-item label="新手机验证码" prop="newCode" class="code">
            <el-input v-model="telForm.newCode" size="small" placeholder="输入新手机验证码" style="width: 40%;"></el-input>
            <el-button size="small" type="success" :disabled="disabledNewShow" @click="getNewCode">{{codeTextNew}}</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" class="cancel-btn" @click="EditTelVisible = false">取 消</el-button>
          <el-button type="success" size="small" @click="EditTel('telForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 绑定邮箱 -->
      <el-dialog title="绑定邮箱" :before-close="closeDiaglog" :visible.sync="bindEmailVisible" :append-to-body="true" width="547px">
        <el-form ref="emailForm" :rules="rules" :model="emailForm" label-width="80px" label-position="top">
          <el-form-item label="邮箱" prop="newAccount" class="code">
            <el-input v-model="emailForm.newAccount" size="small" placeholder="请输入邮箱" style="margin-top:8px;">
              <template slot="prepend">email</template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="newCode" class="code">
            <el-input v-model="emailForm.newCode" placeholder="输入验证码" size="small"></el-input>
            <el-button size="small" type="success" :disabled="disabledEmailNewShow" @click="getNewEmailCode">{{ codeEmailTextNew }}</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" class="cancel-btn" @click="bindEmailVisible = false">取 消</el-button>
          <el-button size="small" type="success" @click="bindToEmail('emailForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 更新email -->
      <el-dialog title="更改邮箱" :visible.sync="EditEmailVisible" :append-to-body="true" width="547px">
        <el-form :model="emailForm" :rules="rules" ref="emailForm" label-width="80px" label-position="top" class="form">
          <el-form-item label="现有邮箱" class="code">
            <el-input v-model="info.email" size="small" disabled placeholder="输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="oldCode" class="code">
            <el-input v-model="emailForm.oldCode" size="small" placeholder="输入验证码" style="width: 40%;"></el-input>
            <el-button size="small" type="success" :disabled="disabledEmailShow" @click="getOldEmailCode">{{ codeEmailText }}</el-button>
          </el-form-item>
          <el-form-item label="新邮箱" prop="newAccount" class="code">
            <el-input v-model="emailForm.newAccount" size="small" placeholder="输入新邮箱"></el-input>
          </el-form-item>
          <el-form-item label="新邮箱验证码" prop="newCode" class="code">
            <el-input v-model="emailForm.newCode" size="small" placeholder="输入新邮箱验证码" style="width: 40%;"></el-input>
            <el-button size="small" type="success" :disabled="disabledEmailNewShow"  @click="getNewEmailCode">{{ codeEmailTextNew}}</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" class="cancel-btn" @click="EditEmailVisible = false">取 消</el-button>
          <el-button type="success" size="small" @click="EditEmail('emailForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 更改密码 -->
      <el-dialog title="修改密码" :visible.sync="EditPassVisible" :append-to-body="true" width="547px">
        <el-form :model="pwdForm" :rules="rules" ref="pwdForm" label-width="80px" label-position="top" class="form">
          <el-form-item label="原密码" prop="oldPwd" class="telphone">
            <pwdInput v-model.trim="pwdForm.oldPwd" placeholder="请输入您的原密码" size="small" class="user-pwd-input" style="width:60%;"> </pwdInput>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd" class="telphone">
            <pwdInput v-model.trim="pwdForm.newPwd" placeholder="请输入您的新密码" size="small" class="user-pwd-input" style="width:60%;"></pwdInput>
          </el-form-item>
          <el-form-item label="确认密码" prop="surePwd" class="telphone">
            <pwdInput v-model.trim="pwdForm.surePwd" placeholder="确认密码" size="small" class="user-pwd-input" style="width:60%;"></pwdInput>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" class="cancel-btn" @click="EditPassVisible = false">取 消</el-button>
          <el-button type="success" size="small" @click="editPass('pwdForm')">确 定</el-button>
        </span>
      </el-dialog>
          <div class="user_header">
            <div class="upload_image" @mouseenter="showText = true" @mouseleave="showText = false">
              <el-upload
                class="avatar-uploader"
                ref="upload"
                style="index:1"
                :limit="1"
                :show-file-list="false"
                :before-upload="uploadSectionFile"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="!info.headimgurl" class="img_upload" :src="squareUrl">
                <img v-else class="img_upload" :src="info.headimgurl">
                <label v-show="showText" class="upload_text">上传</label>
                <div v-show="showText" class="cover"></div>
              </el-upload>
            </div>
            <div class="div_border_diver" style="margin-top:24px;"></div>
            <div class="edit_name_div">
              <p style="width:300px" @click="NameHidd">
                <label v-show="!info.nickName && inputName" class="input_eidt" @mouseenter="enterStatus = true" @mouseleave="enterStatus = false">-</label>
                <label v-show="info.nickName && inputName" class="input_eidt" @mouseenter="enterStatus = true" @mouseleave="enterStatus = false">{{ info.nickName }}</label>
                <el-input ref="inputName" v-show="show" v-model.trim="info.nickName" size="small" maxlength="20" show-word-limit placeholder="请输入姓名" @blur="editNickName" @input="changeValue" @keyup.enter.native="editNickName"  style="width:150px"></el-input>
              </p>
            </div>
            <p :class="show || enterStatus? 'id_number_input' : 'id_number'">ID：{{ info.userId }}</p>
          </div>
          <div class="user_info">
            <p class="label">手机</p>
            <p v-if="!info.mobile" style="margin-bottom:20px;color:$mainColor1">
              <label type="success" size="small" class="bind_text" @click="bindTelVisible=true">绑定手机</label>
            </p>
            <p v-else class="label_result" style="margin-bottom:20px;" @mouseenter="showEidtBut=true" @mouseleave="showEidtBut=false">
              <label>{{ info.mobile }}</label>
              <label v-show="showEidtBut" size="small" style="margin-left:10px;" class="bind_text" @click="editPhoneTrue">更改</label>
            </p>
            <p class="label">邮箱</p>
            <p v-if="!info.email" style="margin-bottom:20px;color:$mainColor1"><label type="success" size="small" class="bind_text" @click="bindEmailNewDialog">绑定邮箱</label></p>
            <p v-else class="label_result" style="margin-bottom:20px;" @mouseenter="showEmailBut=true" @mouseleave="showEmailBut=false">
              <label>{{ info.email }}</label>
              <label v-show="showEmailBut" size="small" class="bind_text" style="margin-left:10px;" @click="editEmailTrue">更改</label>
            </p>
            <!-- <p class="label">微信</p>
            <p v-if="!info.wechat" style="margin-bottom:20px;color:$mainColor1">
              <label type="success" size="small" class="bind_text" @click="wxLoginShow=true">绑定微信</label>
            </p>
            <p v-else class="label_result" style="margin-bottom:20px;">
              <label>已绑定</label>
              <label size="small" style="margin-left:10px;" class="bind_text" @click="unBound">解绑</label>
            </p> -->
            <div class="div_border_diver"></div>
            <p class="label">最近30天活跃</p>
            <p class="label_result">
              <label v-if="info.activeUserNub">{{ info.activeUserNub}}天</label>
              <label v-else>-</label>
            </p>
            <p class="label">上次访问于</p>
            <p class="label_result">
              <label v-if=" info.lastLoginTime">{{ info.lastLoginTime }}</label>
              <label v-else>-</label>
            </p>
            <div class="div_border_diver"></div>
          </div>
          <label class="bind_text" @click="editPassDialog" style="font-size: 16px">修改密码</label>
          <yyyWx :wx-show.sync="wxLoginShow" />
        <!-- 权限明细，操作日志 -->
        <!-- <el-card shadow="never" style="margin-bottom: 29px;width: 75%;margin-left:20px;">
          <authorization/>
        </el-card> -->
    </div>
  </div>
</template>

<script>
import cellHeader from '@/components/cell-header.vue'
import authorization from './Authorization.vue'
import yyyWx from '../../login/components/wx-login.vue'
import axios from 'axios'
import {
  editUserPass,
  getInfo,
  editTelEmail,
  emailRegister,
  smsRegister,
  // modifyUserAccount,
  editModifyUser,
  bindTelEmail,
  weixinlogin
} from '@/api/user.js'
import {
  getToken
} from '@/utils/auth'
export default {
  components: {
    cellHeader,
    authorization,
    yyyWx
  },
  data() {
    const validatePass = (rule, value, callback) => {
      // const reg = new RegExp("[\\u4E00-\\u9FFF]+","g")
      const reg = /^[a-zA-Z0-9_]*$/
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (!(value.length >= 8 && value.length <= 16)) {
        callback(new Error('请输入8到16位密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码输入错误，只能是字母、数字和下划线'))
      } else {
        callback()
      }
      };
    const validatePass2 = (rule, value, callback) => {
      // const reg = new RegExp("[\\u4E00-\\u9FFF]+","g")
      const reg = /^[a-zA-Z0-9_]*$/
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.pwdForm.newPwd) {
        callback(new Error('两次输入密码不一致'))
      } else if (value === this.pwdForm.oldPwd) {
        callback(new Error('不能设置原始密码'))
      }  else if (!reg.test(value)) {
        callback(new Error('密码输入错误，只能是字母、数字和下划线'))
      } else {
        callback()
      }
    };
    const validateEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入原始邮箱'))
      } else if (value !== this.info.email) {
        callback(new Error('请输入原始正确的邮箱'))
      } else {
        callback()
      }
    };
    const validateEmail2 = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!value) {
        callback(new Error('请输入新邮箱'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入有效邮箱'))
      } else {
        callback()
      }
    };
    const validateTel = (rule, value, callback) => {
      let reg = /^1[3456789]\d{9}$/
      if (!value) {
        callback(new Error('请输入原始手机号'))
      } else if (value !== this.info.mobile) {
        callback(new Error('请输入正确的原始手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入有效手机号'))
      } else {
        callback()
      }
    };
    const validateTel2 = (rule, value, callback) => {
         let reg = /^1[3456789]\d{9}$/
      if (!value) {
        callback(new Error('请输入新手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入有效手机号'))
      } else {
        callback()
      }
    };
    const validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码'))
       } else {
          callback()
        }
      };
    return {
      wxLoginShow: false,
      rulesTel: {
        oldAccount: [
          { validator: validateTel, trigger: 'blur' }
        ],
        newAccount: [
          { validator: validateTel2, trigger: 'blur' }
        ],
        newCode: [
          { validator: validateCode, trigger: 'blur' }
        ],
        oldCode: [
          { validator: validateCode, trigger: 'blur' }
        ]
      },
      rules: {
        oldPwd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        newPwd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        surePwd: [
          { validator: validatePass2, trigger: 'blur'}
        ],
        oldAccount: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        newAccount: [
          { validator: validateEmail2, trigger: 'blur' }
        ],
        newCode: [
          { validator: validateCode, trigger: 'blur' }
        ],
        oldCode: [
          { validator: validateCode, trigger: 'blur' }
        ]
      },
      codeText: '获取验证码',
      codeTextNew: '获取验证码',
      codeEmailText: '获取验证码',
      codeEmailTextNew: '获取验证码',
      timeYz: 60,
      timeYzNew: 60,
      timeEmailYz: 60,
      timeEmailYzNew: 60,
      disabledShow: false,
      disabledNewShow: false,
      disabledEmailShow: false,
      disabledEmailNewShow: false,
      enterStatus: false,
      fileName: '',
      info: '',
      show: false,
      // showWX: false,
      showBM: false,
      showText: false,
      // showWXBut: false,
      showBMBut: false,
      showZWBut: false,
      bindTelVisible: false,
      bindEmailVisible: false,
      EditTelVisible: false,
      showEidtBut: false,
      showEmailBut: false,
      EditPassVisible: false,
      EditEmailVisible: false,
      eidtValueStatus: false,
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      files: '',
      pwdForm: {
        newPwd: '',
        oldPwd: '',
        surePwd: '',
      },
      inputName: true,
      // inputShowWX: true,
      inputShowBM: true,
      inputShowZW: true,
      telForm: {
        newAccount: '',
        oldCode: '',
        oldAccount: '',
        newCode: ''
      },
      emailForm: {
        oldAccount: '',
        oldCode: '',
        newAccount: '',
        newCode: ''
      }
    }
  },
  computed: {
    isUrl() {
      return process.env.VUE_APP_BASE_API + 'fdfs/upload'
      // return 'http://cloud.3ydata.com/fdfs/upload'
    },
    isRoleName() {
      let name = this.info.roleName
      if(name === 'visitor') {
        return '账号管理员'
      } else if(name === 'manager') {
        return '系列管理员'
      } else if(name === 'finance') {
        return '账号财务'
      } else if(name === 'readOnly') {
        return '账号只读'
      } else {
        return '账号系列只读'
      }
    }
  },
  beforeRouteEnter(to, from, next) {
      next(async (vm) => {
        if (Object.keys(to.query).length > 0 && to.query.code) {
            var params =
            {
              code: to.query.code,
              state: to.query.state,
              type: 'bound'
            }
          const res = await weixinlogin(params)

          if (res.data.code === 20000) {
            let data ={
              wechat: res.data.data
            }
            vm.editUser(data)
          } else if (res.data.code === 20001) {
            vm.$message.error(res.data.message || '该微信已存在绑定账号')
            vm.$router.push({ path: '/user/personal' })
          }
        } else {
          next()
        }
      })
    },
  watch:{
    // '$route':{
    //   deep: true,
    //   immediate: true,
    //   handler(newV, oldV) {
    //     if (this.$route.query.code && this.$route.query.state) {
    //       this.bindwx()
    //     }
    //   }
    // }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    // 微信绑定
    async bindwx() {
      let params =
        {
          code: this.$route.query.code,
          state: this.$route.query.state,
          type: 'bound'
        }
      const res = await weixinlogin(params)

      if (res.data.code === 20000) {
        let data ={
          wechat: res.data.data
        }
        this.editUser(data)
      } else if (res.data.code === 20001) {
        this.$message.error(res.data.message || '该微信已存在绑定账号')
        // this.$router.push({ path: '/user/personal' })
      }
    },
    // 对话框关闭之前回调
    closeDiaglog() {
      this.bindEmailVisible = false
      this.$emit('isClose','true')
    },
    // 解绑微信
    async unBound() {
      const confirmResult = await this.$confirm('解绑后将无法通过此微信登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-btn',
        // type: 'warning'
      }).catch((err) => err )
      if(confirmResult !== 'confirm') return this.$message.info('已取消解绑')
      let data = {
        wechat: ''
      }
      this.editUser(data)
    },
    handleAvatarSuccess(res, file) {
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
    },
    // 上传图像
    uploadSectionFile(file) {
      let type = file.type
      const isJPG = (type === 'image/jpeg') || (type === 'image/jpg') || (type === 'image/png')
      const isLt5k = file.size / 1024/1024  < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、JPEG、PNG 格式!');
      } else if (!isLt5k) {
        this.$message.error('上传头像图片大小不能超过2MB!');
      } else {
        let fileContent = file
        let formData = new FormData()
        formData.append('uploadFile',fileContent)
        let config = {
        headers: {
          "Content-Type": "multipart/form-data" ,
           "Authorization": getToken()
        },
        methods: 'post'
      }
      axios.post(this.isUrl, formData, config, {timeout: 6000}).then(res => {
        if(res.data.code === 20000) {
         this.info.headimgurl = res.data.data
         this.$message.success('上传图片成功')
         this.info.roleName = this.$store.state.user.userInfo.roleName
         this.$store.commit('user/SET_USER_INFO', this.info)
         this.editImgUrl(this.info.headimgurl)
        } else  {
          this.$message.error(res.data.message || '上传图片失败')
        }
      })
      }

      return false
    },
    // 输入框
    changeValue(value) {
      if(value) {
        this.eidtValueStatus = true
      }
    },
    // 绑定个人信息图片url
    editImgUrl(imgUrl){
       let data = {
        headimgurl: imgUrl
      }
      this.editUser(data)
    },
    // 修改个人名称
    editNickName() {
      let data ={
        nickName: this.info.nickName
      }
      if(this.info.nickName === '') {
        this.$message.info('值不能为空')
      } else if(!this.eidtValueStatus){
        this.show = false
        this.inputName = true
        this.getInfo()
      } else {
        this.editUser(data)
      }
    },
    // 公共修改个人信息
    async editUser(data) {
      const res = await editModifyUser(data)
      if(res.data.code === 20000) {
        this.info.roleName = this.$store.state.user.userInfo.roleName
        this.$store.commit('user/SET_USER_INFO',this.info)
        this.sumbitClose()
        if (data.headimgurl) {
          return
        } else if(data.wechat) {
          if (data.wechat === '') {
            this.$message.success('微信解绑成功')
          } else {
            this.$message.success('微信绑定成功')
            this.$router.push({ path: '/user/personal' })
          }
        } else {
          this.$message.success(res.data.message ||'更改成功')
        }
        this.getInfo()
      } else return this.$message.error(res.data.message || '更改失败')
    },
    // 修改
    sumbitClose() {
      this.inputName = true
      this.show = false
      // this.inputShowWX = true
      // this.showWX = false
      // this.showWXBut = false
      this.inputShowBM = true
      this.showBM = false
      this.showBMBut= false
      this.inputShowZW = true
      this.showZW = false
      this.showZWBut = false
      this.eidtValueStatus = false
      this.inputValue = false
    },
    NameHidd() {
      this.inputName = false
      this.show = true
      this.$nextTick(() => {
        this.$refs.inputName.focus()
      })
    },
    Nameshow() {
      this.inputName = true
      this.show = false
      this.getInfo()
    },
    // WXHidd() {
    //   this.inputShowWX = false
    //   this.showWX = true
    //   this.showWXBut = true
    //   this.$nextTick(() => {
    //     this.$refs.inputWX.focus()
    //   })
    // },
    // WXshowTex() {
    //   this.inputShowWX = true
    //   this.showWX = false
    //   this.showWXBut = false
    //   this.getInfo()
    // },
    BMHidd() {
      this.inputShowBM = false
      this.showBM= true
      this.showBMBut = true
      this.$nextTick(() => {
        this.$refs.inputBM.focus()
      })
    },
    BMshowTex() {
      this.inputShowBM = true
      this.showBM = false
      this.showBMBut = false
      this.getInfo()
    },
    ZWHidd() {
      this.inputShowZW = false
      this.showZW= true
      this.showZWBut=true
      this.$nextTick(() => {
        this.$refs.inputZW.focus()
      })
    },
    ZWshowTex() {
      this.inputShowZW = true
      this.showZW = false
      this.showZWBut = false
      this.getInfo()
    },
    // 获取用户信息
    async getInfo() {
      const res = await getInfo()
      if (res.data.code === 20000) {
        this.info = res.data.data
        this.info.roleName = this.$store.state.user.userInfo.roleName
        this.$store.commit('user/SET_USER_INFO', this.info)
        this.$forceUpdate()
      } else {
        this.$message.error('获取用户信息失败')
      }
    },
    // 绑定邮箱
     editEmailTrue() {
      this.EditEmailVisible = true
      this.emailForm = {}
      this.codeEmailText = '获取验证码'
      this.codeEmailTextNew = '获取验证码'
    },
    bindEmailNewDialog() {
      this.bindEmailVisible=true
      this.emailForm.newAccount = ''
      this.emailForm.newCode = ''
    },
    bindToEmail(emailForm) {
      this.$refs[emailForm].validate(async valid => {
        if (valid) {
          let data = {
            type: 'register',
            code: this.emailForm.newCode,
            email: this.emailForm.newAccount
          }
          const res = await bindTelEmail(data)
          if (res.data.code === 20000) {
            this.$message.success('绑定邮箱成功')
            this.emailForm.newAccount = ''
            this.emailForm.newCode = ''
            this.bindEmailVisible = false
            this.getInfo()
          } else {
            this.$message.error(res.data.message ||'绑定邮箱失败')
          }
        }
      })
    },
    // 绑定手机
    async bindToTel() {
      let data = {
        type: 'register',
        code: this.telForm.newCode,
        mobile: this.telForm.newAccount
      }
      const res = await bindTelEmail(data)
      if (res.data.code === 20000) {
        this.$message.success('绑定手机成功')
        this.bindTelVisible = false
        this.getInfo()
      } else {
        this.$message.error(res.data.message || '绑定手机失败')
      }
    },
    // 修改密码
    editPassDialog() {
      this.EditPassVisible=true
      this.pwdForm = {}
    },
    editPass(pwdForm) {
      this.$refs[pwdForm].validate(async valid => {
        if (valid) {
          let data = {
            newPwd: this.pwdForm.newPwd,
            oldPwd: this.pwdForm.oldPwd
          }
          const res = await editUserPass(data)
          if (res.data.code === 20000) {
            this.$message.success('密码修改成功，请重新登录')
            await this.$store.dispatch('user/logout')
            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          } else {
            this.$message.error(res.data.message || '用户修改密码失败')
          }
        } else {
          return false
        }
      })
    },
    // 更改手机号
    editPhoneTrue() {
      this.EditTelVisible = true
      this.telForm = {}
      this.codeText = '获取验证码'
      this.codeTextNew = '获取验证码'
    },
    EditTel(telForm) {
      let data = {
        newAccount: this.telForm.newAccount,
        newCode: this.telForm.newCode,
        oldAccount: this.info.mobile,
        oldCode: this.telForm.oldCode,
        type: 'modifyMobile'
      }
      this.$refs[telForm].validate(valid => {
        if(valid) {
          this.commonEditTelEmail(data)
        } else return false
      })
    },
    // 获取旧手机号验证码
    getOldCode() {
      let data = {
        type: 'retrieve',
        account: this.info.mobile
      }
      this.getComCode(data)
    },
    // 获取新手机验证码
    getNewCode() {
      let reg = /^1[3456789]\d{9}$/
      if (!reg.test(this.telForm.newAccount)) return
      let data = {
        type: 'register',
        account: this.telForm.newAccount
      }
      this.getComCode(data)
    },
    // 手机验证码公共接口
    async getComCode(data) {
      const res = await smsRegister(data)
      if (res.data.code === 20000) {
        if(data.type === 'retrieve') {
          this.disabledShow = true
          this.codeText = this.timeYz + 's'
          let auth_timer = setInterval(() => {
           this.timeYz --;
          this.codeText = this.timeYz + 's'
          if(this.timeYz <= 0) {
            this.disabledShow= false
            this.timeYz = 60
            this.codeText = '获取验证码'
            clearInterval(auth_timer)
            }
          }, 1000)
        } else if(data.type= 'register') {
          this.disabledNewShow = true
          this.codeTextNew = this.timeYzNew + 's'
          let auth_timer = setInterval(() => {
            this.timeYzNew --;
            this.codeTextNew = this.timeYzNew + 's'
            if(this.timeYzNew <= 0) {
              this.disabledNewShow= false
              this.timeYzNew = 60
              this.codeTextNew = '获取验证码'
              clearInterval(auth_timer)
            }
          }, 1000)
        }
        this.$message.success('验证码发送成功')
      }
      else return this.$message.error(res.data.message || '验证码发送失败')
    },
    // 更新邮箱
    EditEmail(emailForm) {
      let data = {
        newAccount: this.emailForm.newAccount,
        newCode: this.emailForm.newCode,
        oldAccount: this.info.email,
        oldCode: this.emailForm.oldCode,
        type: 'modifyEmail'
      }
      this.$refs[emailForm].validate(valid => {
        if (valid) {
          this.commonEditTelEmail(data)
        } else {
          return false
        }
      })
    },
    // 邮箱电话修改提交
    async commonEditTelEmail(data) {
      const res = await editTelEmail(data)
        if (res.data.code === 20000) {
          this.EditEmailVisible = false
          this.EditTelVisible = false
          this.emailForm = {}
          this.telForm = {}
          this.$message.success('更新成功')
          this.getInfo()
        } else {
          this.$message.error(res.data.message || '更新失败')
        }
    },
    // 获取旧邮箱验证码
    getOldEmailCode() {
      let data = {
        type: 'retrieve',
        account: this.info.email
      }
      this.getEmailCode(data)
    },
    // 获取新邮箱验证码
    getNewEmailCode() {
      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if(!reg.test(this.emailForm.newAccount)) return
      let data = {
        type: 'register',
        account: this.emailForm.newAccount
      }
      this.getEmailCode(data)
    },
    // 邮箱公共接口方法
    async getEmailCode(data) {
      const res = await emailRegister(data)
      if (res.data.code === 20000){
        if (data.type === 'retrieve') {
          this.disabledEmailShow = true
          this.codeEmailText = this.timeEmailYz + 's'
          let auth_timer = setInterval(() => {
            this.timeEmailYz--;
            this.codeEmailText = this.timeEmailYz + 's'
            if(this.timeEmailYz <= 0) {
              this.disabledEmailShow= false
              this.timeEmailYz = 60
              this.codeEmailText = '获取验证码'
              clearInterval(auth_timer)
            }
          }, 1000)
        } else if (data.type === 'register') {
          this.disabledEmailNewShow = true
          this.codeEmailTextNew = this.timeEmailYzNew + 's'
          let auth_timer = setInterval(() => {
            this.timeEmailYzNew --;
            this.codeEmailTextNew = this.timeEmailYzNew + 's'
            if(this.timeEmailYzNew <= 0) {
              this.disabledEmailNewShow= false
              this.timeEmailYzNew = 60
              this.codeEmailTextNew = '获取验证码'
              clearInterval(auth_timer)
            }
          }, 1000)
        }
        this.$message.success('验证码发送成功')
      }
      else return this.$message.error(res.data.message  || '验证码发送失败')
    }
  }
}
</script>

<style lang="scss" scoped="true">
@import "~@/styles/variables.scss";
div /deep/.el-input .el-input__count .el-input__count-inner {
    margin-top: 20px;
}
div /deep/.el-form--label-top .el-form-item__label {
  line-height: 0px;
}
.fin_header{
  span {
    font-size: 20px;
    text-indent: 18px;
    position: relative;
    margin-left: 25px;
    font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
    top: 30px;
     &::after {
      display: inline-block;
      content: '1';
      width: 8px;
      height: 24px;
      position: absolute;
      top: 12px;
      left: 0px;
      transform: translateY(-50%);
      font-size: 0;
      background-color: $mainColor1;
    }
  }
}
.input_eidt {
 color:#39444e;
 font-size:20px;
 width: 260px;
 cursor: pointer;
 overflow:hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
}
.input_eidt:hover{
  width: 260px;
  border: 1px solid #E0E2E7;
  border-radius: 2px;
  line-height: 28px;
  padding: 3px 15px;
  box-sizing: border-box;
  font-size: 20px;
  color: #606266;
}
 .el-divider {
    margin-top: 40px;
}
.div_border_diver {
  border-bottom: 1px solid rgba(57, 68, 78, 0.1);
  height: 1px;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 96%;
  text-align: center;
}
.create-layout {
  display: flex;
  height: 100%;
  margin-left: 20px;
  overflow: hidden;
}
.main {
  flex: 1;
}
.img_upload {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 1px solid #E0E2E7;
}
.cover{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  position: absolute;
  margin-top: -84px;
  margin-left: -0.5px;
  background-color: black;
  opacity: 0.5;
}
.user_header {
  margin-top: 4px;
  .upload_text{
    color:white;
    position: fixed;
    z-index: 1;
    margin-top: 31px;
    margin-left: -60px;
    font-size: 18px;
    width: 40px;
    height:20px;
  }
  .upload_image {
    width: 78px;
    height: 82px;
    display: inline-block;
  }
  .edit_name_div {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin-top: -115px;
    margin-left: 90px;
      width: 288px;
    // top: -105px;
    // left: 90px;
    color: $assistTextColor3;
    .label {
      cursor: pointer;
    }
  }
  .id_number {
    position: absolute;
    margin-top: -88px;
    margin-left: 90px;
    // left: 90px;
    // top: -95px;
    color: $assistTextColor4;
    font-size: $mainTextFont5;
  }
  .id_number_input {
    position: absolute;
    margin-top: -80px;
    margin-left: 90px;
    // left: 90px;
    // top: -95px;
    color: $assistTextColor4;
    font-size: $mainTextFont5;
  }
}
.nick_button{
  width: 44px;
  height: 28px;
  text-align: center;
}
.user_info {
  // margin-top: -30px;
  .label {
    color: #ACB6C2;
    margin-bottom: 10px;
    font-family: PingFang SC !important;
  }
  .label_result {
    font-size: $mainTextFont5;
    margin-bottom: 20px;
    color: $assistTextColor3;
  }
}
.telphone {
  .el-input {
    width: 70%;
  }
  .el-input__inner {
    margin-top: -10px;
  }
}
.code {
  .el-input {
    width: 60%;
  }
  .el-button {
    margin-left: 10px;
  }
}
.telphone_edit:hover {
  cursor: pointer;
}
.bind_text {
  color: $mainColor1;
  cursor: pointer;
  font-size: $mainTextFont5;
  font-family: PingFang SC !important;
}
.edit_password {
 color: $mainColor1;
 font-size: $mainTextFont4;
 cursor: pointer;
 font-family: PingFang SC !important;
}
.label_result_text {
  color: #39444e;
  font-size: 14px;
  margin: 0 0 20px;

}
</style>
